<template>
  <div id="bingmap-container"></div>
</template>
<script>
import * as Cesium from 'cesium';
// 点颜色
const color1 = new Cesium.Color(77 / 255, 210 / 255, 237 / 255, 1); // new Cesium.Color(200 / 255, 200 / 255, 0 / 255, 0.8);
const color2 = new Cesium.Color(255 / 255, 250 / 255, 0 / 255, 0.8);
const color3 = new Cesium.Color(255 / 255, 250 / 255, 0 / 255, 0.9);
const color4 = new Cesium.Color(255 / 255, 250 / 255, 250 / 255, 0.6);
// 动画设置
const animationObj = {
  stepsRange: {
    start: 0,
    end: 10
  },
  trails: 1,
  duration: 6
};

const _range = animationObj.stepsRange.end - animationObj.stepsRange.start;

var pointCount = 0;
// 显隐控制
const isAvailable = function (currentTime) {
  if (!Cesium.defined(currentTime)) {
    throw new Cesium.DeveloperError('time is required.');
  }
  // 6ms 一次
  var nMS = Cesium.JulianDate.toDate(currentTime).getTime() / animationObj.duration;
  // 每次亮 10
  var time = (nMS % _range) + animationObj.stepsRange.start;

  var trails = trails || 10;
  if (time && this.nameID > time - trails && this.nameID < time) {
    return true;
  } else {
    return false;
  }
};

const isAvailable2 = function (currentTime) {
  if (!Cesium.defined(currentTime)) {
    throw new Cesium.DeveloperError('time is required.');
  }
  var nMS = Cesium.JulianDate.toDate(currentTime).getTime() / 1000;
  const len = nMS % pointCount;
  if (len == 0) {
    return true;
  } else {
    return this.index < len;
  }
};

export default {
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer('bingmap-container', {
      baseLayerPicker: false, // 地图选择按钮
      geocoder: false, // 搜索按钮，
      homeButton: false, // 跳转主页按钮
      animation: false, // 动画按钮
      creditsDisplay: false, //
      timeline: true, // 时间轴按钮
      fullscreenButton: false, // 全屏功能显示按钮
      scene3DOnly: false,
      navigationHelpButton: false, // 操作帮助按钮
      infoBox: false,
      selectionIndicator: false,
      sceneModePicker: false, // 是否开启平面图选择
      terrainShadows: Cesium.ShadowMode.DISABLED,
      shouldAnimate: true
    });
    // 设置2d底图
    viewer.scene.mode = Cesium.SceneMode.SCENE2D;
    // 设置初始位置
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(110.2, 34.55, 20000000)
    });
    //  去除水印
    viewer._cesiumWidget._creditContainer.style.display = 'none';
    // 高德标注
    viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
      })
    );
    // 加载JSON数据
    Cesium.Resource.createIfNeeded('data/weibo.json')
      .fetchJson()
      .then((data) => {
        this.renderPointsByEntities(viewer, data);
        // this.renderPointsByprimitive(viewer, data);
      })
      .otherwise(function (error) {});
    viewer.zoomTo(viewer.entities);
  },
  methods: {
    /**
     * 使用实体渲染点
     */
    renderPointsByEntities(viewer, data) {
      const [data1, data2, data3] = data;
      let j = 1;
      for (let i = 0; i < data1.length; i += 2, j++) {
        const p = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(data1[i].geoCoord[0], data1[i].geoCoord[1], 0),
          nameID: Math.random() * 10,
          index: j,
          point: {
            show: true,
            color: color1,
            pixelSize: 0.7
          }
        });
        p.isAvailable = isAvailable;
      }
      pointCount = j;
      return viewer;
    },

    /**
     * 使用图元渲染点
     */
    renderPointsByprimitive(viewer, data) {
      var start = Cesium.JulianDate.fromIso8601('2021-09-01');
      var end = Cesium.JulianDate.fromIso8601('2021-09-02');

      viewer.timeline.zoomTo(start, end);

      var clock = viewer.clock;
      clock.startTime = start;
      clock.endTime = end;
      clock.currentTime = start;
      clock.clockRange = Cesium.ClockRange.LOOP_STOP;
      clock.multiplier = 400;

      const points = viewer.scene.primitives.add(
        new Cesium.PointPrimitiveCollection({
          // blendOption: Cesium.BlendOption.TRANSLUCENT // 透明混合度,用于大数据量渲染时提高效率
        })
      );
      const [data1, data2, data3] = data;

      data1.forEach((v) => {
        const p = points.add({
          // outlineColor: Cesium.Color.WHITE,
          // outlineWidth: 2.0,
          pixelSize: 0.7,
          show: true,
          color: Cesium.Color.WHITE,
          position: Cesium.Cartesian3.fromDegrees(v.geoCoord[0], v.geoCoord[1], 0),
          disableDepthTestDistance: Number.POSITIVE_INFINITY // 永远禁用深度测试
        });
        p.color = Cesium.Color.RED;
      });

      // points.get(0).color = Cesium.Color.RED;
    }
  }
};
</script>
<style lang="scss" scoped>
#bingmap-container {
  height: 100%;
  position: relative;
  cursor: crosshair;
}
</style>
